import React, { useEffect } from 'react';
import * as echarts from 'echarts';

export default function AreaBasicChart(props) {
  let _ref = null;
  useEffect(() => {
    echarts.init(_ref).setOption({
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLabel: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      },

      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          itemStyle: {
            color: props.color || 'rgb(128, 128, 128)'
          },
          lineStyle: {
            color: props.color || 'rgb(128, 128, 128)'
          },
          areaStyle: {
            color: props.color || 'rgb(128, 128, 128)'
          },
          label: {
            show: false
          }
        }
      ]
    });
  }, []);
  return <div ref={ref => (_ref = ref)} style={{ width: props.width + 'px', height: props.height + 'px' }}></div>;
}
